let hour = document.querySelectorAll('.hour>.number');
let min = document.querySelectorAll('.min>.number');
let sec = document.querySelectorAll('.sec>.number');
let colck = document.querySelectorAll('.clcok');
console.log(hour);

let arrTemp = [
  // 因为后面要根据索引判断 所以这里一定要根据0开始
  [1, 2, 3, 4, 5, 6, 8, 9, 10, 11, 12, 13],
  [3, 5, 8, 10, 13],
  [1, 2, 3, 5, 6, 7, 8, 9, 11, 12, 13],
  [1, 2, 3, 5, 6, 7, 8, 10, 11, 12, 13],
  [1, 3, 4, 5, 6, 7, 8, 10, 13],
  [1, 2, 3, 4, 6, 7, 8, 10, 11, 12, 13],
  [1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 13],
  [1, 2, 3, 5, 8, 10, 13],
  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
  [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13],
];

console.log(colck);
setTimeout(() => {
  colck.forEach((item) => item.classList.remove('hide'));
}, 1000);

function getNow() {
  let time = new Date();
  let hours = time.getHours();
  let mins = time.getMinutes();
  let secs = time.getSeconds();
  let months = time.getMonth();

  hours = (hours < 10 ? `0${hours}` : hours).toString().split('');
  mins = (mins < 10 ? `0${mins}` : mins).toString().split('');
  secs = (secs < 10 ? `0${secs}` : secs).toString().split('');
  changeUI(hour, hours);
  changeUI(min, mins);
  changeUI(sec, secs);
  changeUI(month, months);
  console.log();

  console.log(mins, secs);
}

function changeUI(els, temp) {
  [...els].map((item, indec) => {
    let count = item.querySelectorAll('.count');
    [...count].map((ele, index) => {
      temp.map((number, ix) => {
        if (indec == ix) {
          //  ele[0] == temp[0]  单独设置
          if (arrTemp[+number].includes(index + 1)) {
            //如果1-13个小方块有存在指定数组中的 就显示 不存在就直接隐藏
            ele.classList.add('show');
          } else {
            ele.classList.remove('show');
          }
        }
      });
    });
  });
}
setInterval(getNow, 1000);
